<template>
    <div class="login">
      <div class="login-box">
        <p>火星</p>
        <el-form ref="loginform" :model="loginform" :rules="rules">
            <el-form-item prop="userName">
              <el-input placeholder="请输入用户名" v-model.trim="loginform.userName" prefix-icon="el-icon-user"></el-input>
            </el-form-item>
            <el-form-item prop="userPwd">
              <el-input placeholder="请输入密码" type="password" v-model.trim="loginform.userPwd" prefix-icon="el-icon-user"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="login-button" @click="login">登录</el-button>
            </el-form-item>
        </el-form>
      </div>
    </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      loginform: {
        userName: 'admin',
        userPwd: '123456',
      },
      rules: {
        userName: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
        ],
        userPwd: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          {
            min: 6, max: 20, message: '密码不能小于6位和大于20位', trigger: 'blur',
          },
        ],
      },
    };
  },
  methods: {
    login() {
      // 点击登录
      this.$refs.loginform.validate(async (valid) => {
        if (!valid) return;
        const response = await this.$store.dispatch('handleUserLogin', this.loginform);
        this.$router.push('/welcome');
      });
    },
  },
};
</script>

<style scoped lang="scss">
.login {
    width: 100%;
    height: 100%;
    background-color: #f9fcff;
}
.login-box {
    width: 400px;
    height: 300px;
    margin: 200px auto;
    padding: 50px;
    background-color: #fff;
    box-shadow: 0 0 10px 5px rgb(199 201 203 / 30%);
    p {
      font-size: 50px;
      text-align: center;
      margin-bottom: 30px;
    }
}
.login-button {
    width: 100%;
}
</style>
